<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美食列表</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- BS4依赖 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- json依赖 -->
    <script src="js/json2.js"></script>
    <style type="text/css">
        /* 三层div用于按比例缩放图片 */
        .demo {
            width: 100%;
            height: 300px;
            overflow: hidden;
        }
        .demo1-1 {
            float: left;
            width: 200px;
            height: 200px;
        }
        .zoomImage {
            width: 100%;
            height: 0;
            padding-top: 100%;
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
        }

        /* div阴影显示 */
        .show-shadow:hover{
            -webkit-box-shadow: #666 0px 0px 10px;
            -moz-box-shadow: #666 0px 0px 10px;
            box-shadow: #666 0px 0px 10px;
        }

        /* Make the image fully responsive */
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        // 根据key（搜索关键词）获取美食信息（模糊查询）
        var rawKey = decodeURI(window.parent.location.href.split("=")[1]);
        var key = "";
        // 如果存在两个参数以上（此时肯定有连接符&），则继续分割字符，取出目标关键字
        // 只有一个参数则不需要处理，直接赋值即可
        if (rawKey.indexOf("&")) {
            key = rawKey.split("&")[0];
        } else {
            key = rawKey;
        }
        var pageNum = decodeURI(window.location.href.split("=")[2]);
        // 如果未定义pageNum，则设置为0（从结果集第一条开始取，下标从0开始）
        if ("undefined" == pageNum) {
            pageNum = 0;
        }
        console.log("模糊搜索的关键词是：" + rawKey);
        console.log("最终关键词是：" + key);
        console.log("分页查询的页数是:" + pageNum);

        function display() {
            alert("调用了方法");
        }
        $.ajax({
            url: "getCateListByKey",
            type: "post",
            data: {"cateName": key, "offset": pageNum},
            dataType: "json",
            success: function (data) {
                console.log("ajax执行模糊查询");
                // 成功获取服务器发送的美食信息
                var cates = data;
                console.log("data值为：" + data.toString());
                console.log("cates的长度是：" + cates.length);
                for (row in cates) {
                    $("#col").append(
                        "<div class='row mt-4'>" +
                        "<div class='col-4'><div class='demo1-1'><div class='zoomImage d-block w-100 rounded' style=\"background-image: url(" + cates[row].cateImage + ")\"></div></div></div>" +
                        "<div class='col-4'>" +
                            "<div class='row'><p>" + cates[row].cateName + "</p></div>" +
                            "<div class='row'><p>" + cates[row].userName + "</p></div>" +
                            "<div class='row'><p>原料：" + cates[row].foodMaterial + "</p></div>" +
                        "</div>' " +
                        "</div>"
                    );
                }
                // 如果查询信息多于2条，则分页显示
                if (cates.length > 2) {
                    $("#catePage").append(
                        "<div class=\"row\">" +
                        "  <div class=\"col-1\"></div>" +
                        "  <div class=\"col-10\">" +
                        "  <button type=\"button\" class=\"btn btn-primary\" onclick='display()'>上一页</button>" +
                        "  &nbsp;&nbsp;" +
                        "  <button type=\"button\" class=\"btn btn-primary\" onclick='display()'>下一页</button>" +
                        "  &nbsp;&nbsp;&nbsp;&nbsp;" +
                        "  <span>共" + pageNum +"页</span>" +
                        "  &nbsp;&nbsp;&nbsp;&nbsp;" +
                        "  跳转到：<input type=\"text\" style=\"width: 40px;\"/>&nbsp;页" +
                        "  </div>" +
                        "  <div class=\"col-1\"></div>" +
                        "  </div>"
                    );
                } else {
                    $("#catePage").append(
                        "  <div class=\"row\">" +
                        "  <div class=\"col-4\"></div>" +
                        "  <div class=\"col-4\" style=\"text-align: center; font-size: 20px; line-height: 2.4; letter-spacing: 4px; font-family: 楷体;\">" +
                        "  <hr>" +
                        "  <span>没有更多的数据了噢~</span>" +
                        "  </div>" +
                        "  <div class=\"col-4\"></div>" +
                        "  </div>"
                    );
                }
            },
            error: function () {
                alert("无法获取美食信息！！");
            }
        });
    </script>
</head>
<body>
    <!-- 顶部导航 -->
    <div id="top" class="container-full"></div>
    <script>
        // TODO 加载顶部导航，位置放div下，否则无法加载
        $("#top").load("page-top.html");
    </script>

    <!-- 搜索栏 -->
    <div id="search" class="container mb-2"></div>
    <script>
        $("#search").load("main-search.html");
    </script>

    <!-- 显示查询结果视图 -->
    <div class="container">
        <div class="row">
            <div class="col-1"></div>
            <div id="col" class="col">
            </div>
        </div>
    </div>

    <!-- 分页模块 -->
    <div id="catePage" class="container mt-4">

    </div>
</body>
</html>